<template>
	<div v-if="visible">
		<el-dialog :title="$t('text.recordsTitle')" :visible.sync="visible" width="60%" :before-close="closeDialog"
			custom-class="add_dialog" append-to-body>
			<div class="main_content_con">
				<el-table ref="qtable" v-loading="loading" :data="tableData" tooltip-effect="dark" style="width:100%" row-key="id"
					:tree-props="{ children: 'children' }" :default-expand-all="false" :select-on-indeterminate="true"
					:border="true" height="100%" highlight-current-row @current-change="handleCurrentChangeRow">
					<template v-for="(item, headerIndex) in tableConfig">
						<el-table-column v-if="item.show" :key="item.key" :min-width="item.width" :column-key="item.key"
							:show-overflow-tooltip="true" :resizable="item.resizable" :fixed="item.fixed" align="center">
							<template slot="header" slot-scope="scope">
								<div class="header_item">
									{{ item.label }}
								</div>
								<div v-if="showSearch" class="search_box">
									<div v-if="item.searchEnable">
										<div class="input_box">
											<el-input v-model="item.value" size="mini" clearable :placeholder="$t('placeholderTip.enter')"
												:tabindex="headerIndex + 1 + ''" @keyup.enter.native="getList" @clear="getList" />
										</div>
									</div>
								</div>
							</template>
							<template slot-scope="scope">
								<span v-if="item.key === 'isReserve'">{{ scope.row[item.key] === 1 ? $t('text.makeReservation') :
									$t('text.orderIn') }}</span>
								<span v-else>
									{{ scope.row[item.key] || '-' }}
								</span>
							</template>
						</el-table-column>
					</template>
				</el-table>
			</div>
			<div class="pagination_box">
				<el-pagination :current-page="pagination.page" :page-sizes="[10, 20, 30, 50, 100]" :page-size="pagination.limit"
					layout="total, sizes, prev, pager, next, jumper" :total="pagination.total" @size-change="handleSizeChange"
					@current-change="handleCurrentChange" />
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeDialog">{{ $t('el.popconfirm.cancelButtonText') }}</el-button>
				<el-button type="primary" @click="getData">{{ $t('el.popconfirm.confirmButtonText') }}</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
import { getMaxReservelList } from '@/api/business-manager'
export default {
	props: [],
	data() {
		return {
			loading: false,
			visible: false,
			tableData: [],
			currentRow: null,
			refreshDelay: 200,
			showSearch: true,
			pagination: {
				page: 1,
				limit: 20,
				total: 0
			},
			tableConfig: []
		}
	},
	watch: {},
	mounted() { },
	beforeDestroy() { },
	methods: {
		getOpen() {
			this.visible = true
			this.tableConfig = [
				{
					key: 'name',
					label: this.$t('publicFormLabel.namePerson'),
					searchField: 'name',
					show: true,
					searchEnable: true,
					searchType: 'text',
					width: 150,
					value: ''
				},
				{
					key: 'phone',
					label: this.$t('publicFormLabel.phone'),
					searchType: 'text',
					searchField: 'phone',
					show: true,
					searchEnable: true,
					width: 120,
					value: ''
				},
				{
					key: 'modelName',
					label: this.$t('publicFormLabel.modelName'),
					searchType: 'text',
					searchField: 'modelName',
					show: true,
					searchEnable: true,
					width: 260,
					value: ''
				},
				{
					key: 'isReserve',
					label: this.$t('publicFormLabel.type'),
					searchType: 'text',
					searchField: 'isReserve',
					show: true,
					searchEnable: false,
					width: 100,
					value: ''
				},
			]
			this.loading = true
			this.currentRow = null
			this.pagination = {
				page: 1,
				limit: 20,
				total: 0
			}
			this.getList()
		},
		getList() {
			var params = {
				page: this.pagination.page,
				limit: this.pagination.limit
			}
			this.tableConfig.forEach(item => {
				if (item.searchEnable && item.value) {
					if (item.searchType === 'timeRange') {
						params[item.searchField || item.key] = item.value.join(',')
					} else {
						params[item.searchField || item.key] = item.value
					}
				}
			})
			var searchObj = ''
			// // 筛选条件取值
			if (Object.keys(params).length > 0) {
				Object.keys(params).forEach(function (key, index) {
					if (index === 0) {
						// 第一个 不需要  '&'
						searchObj = searchObj.concat(`${key}=${params[key]}`)
					} else {
						searchObj = searchObj.concat('&' + `${key}=${params[key]}`)
					}
				})
			}
			getMaxReservelList(searchObj).then(res => {
				if (res.code === 200) {
					this.tableData = res.data.list
					this.pagination.limit = res.data.pageSize
					this.pagination.total = res.data.totalCount
					this.loading = false
				} else {
					this.loading = false
				}
			})
		},
		handleCurrentChangeRow(val) {
			this.currentRow = val
		},
		getData() {
			if (!this.currentRow) {
				this.$message({
					message: this.$t('text.pSelLeastList'),
					type: 'warning'
				})
				return false
			}
			this.$emit('setReservationList', this.currentRow);
			this.visible = false
		},
		closeDialog() {
			this.visible = false
			this.tableConfig = []
		},
		// 分页
		handleSizeChange(val) {
			this.pagination.limit = val
			this.getList()
		},
		handleCurrentChange(val) {
			this.pagination.page = val
			this.getList()
		}
	}
}
</script>
<style lang="scss" scoped>
.main_content_con {
	width: 100%;
	height: calc(100% - 25px);
	overflow: auto;
	display: inline-block;

	::v-deep .el-table__body tr.current-row>td {
		background-color: #e6c892 !important;
	}

	.el-table {
		::v-deep .el-icon-arrow-right {
			font-weight: 600;
		}

		::v-deep .el-form-item__error {
			left: 5%;
		}

		::v-deep .el-table__header .el-checkbox {
			display: none !important;
		}

		::v-deep th {
			padding: unset;
			background-color: #f2f2f2;

			.header_item {
				height: 39px;

				display: flex;
				justify-content: center;
				align-items: center;

				&>.keySort {
					width: 23px;
					height: 21px;
					position: relative;
					display: inline-block;

					&>.el-icon-caret-top {
						position: absolute;
						top: 0;
						right: 0;
						left: 0;
						margin: auto;
						cursor: pointer;
					}

					&>.el-icon-caret-bottom {
						position: absolute;
						bottom: 0;
						right: 0;
						left: 0;
						margin: auto;
						cursor: pointer;
					}
				}
			}
		}
	}
}
</style>

<style lang="scss" scoped>
::v-deep .add_dialog {
	height: calc(100% - 30vh) !important;
	position: relative;

	.el-dialog__header {
		border-bottom: 1px solid #e4e4e4;
		text-align: left;
	}

	.el-dialog__body {
		height: calc(100% - 125px) !important;
	}

	.el-dialog__footer {
		border-top: 1px solid #e4e4e4;
		text-align: right;
	}

	.el-button:hover,
	.el-button:focus {
		color: #000;
	}
}
</style>
